﻿@{
    this.ViewBag.Title = "Manage Application Settings";
    this.Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var appSettings = new Settings();
            appSettings.loadJson(@Html.Raw(ViewBag.Json));
            ko.applyBindings(appSettings, document.getElementById("main"));

            $('#fileUploadProxy').click(function () {
                $('#fileUpload').click();
            });

            $('#fileUpload').fileupload({
                url: appPath + 'Settings/Upload',
                dataType: 'json',
                
                done: function (e, data) {
                    appSettings.imageUrl(data.result);
                    setTimeout(function () { $('#progress .bar').css('width', '0%') }, 1000);
                },
                progressall: function (e, data) {
                    // Update the progress bar while files are being uploaded
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css(
                        'width',
                        progress + '%'
                    );
                }
            });
        });
    </script>
}

<div id="main">
    <h1>Application settings</h1>
    <div class="form" style="width: 90%">
        <fieldset>
            <legend>Application Settings</legend>
            <div>
                <div class="success" data-bind="text: successMessage"></div>
                <div class="error" data-bind="html: errorMessage"></div>
            </div>
            <div class="left" style="width: 20%">
                <span>Blog name:</span>
            </div>
            <div class="right" style="width: 70%">
                <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" />
            </div>
            <div class="left" style="width: 20%">
                <span>Tagline:</span>
            </div>
            <div class="right" style="width: 70%">
                <input type="text" data-bind="value: tag, valueUpdate: 'afterkeydown'" />
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Use Image:</span>
            </div>
            <div class="right" style="width: 70%">
                <span>
                    <input type="checkbox" data-bind="checked: useImage" />
                </span>
                <img data-bind="attr: {src: imageUrl}, visible: imageUrl().length>0" style="height: 36px; vertical-align: middle" alt="logo" />
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%"></div>
            <div class="right" style="width: 70%;">
                <div style="float: left">
                    <input type="button" value="Upload" id="fileUploadProxy" />
                    <input type="file" id="fileUpload" />
                </div>
                <div style="line-height: 40px; float: left;">
                    <div id="progress" class="progressbar">
                        <div class="bar"></div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Google analytics:</span>
            </div>
            <div class="right" style="width: 70%">
                <input type="text" data-bind="value: ga, valueUpdate: 'afterkeydown'" />
            </div>
            <div class="left" style="width: 20%">
                <span>Post count:</span>
            </div>
            <div class="right" style="width: 70%">
                <select data-bind="{value: postCount, options: postCountOptions, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }}"></select>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Comment moderation:</span>
            </div>
            <div class="right" style="width: 70%">
                <span>
                    <input type="checkbox" data-bind="{checked: moderation}" /></span>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Skin:</span>
            </div>
            <div class="right" style="width: 70%">
                <select data-bind="{value: skin, options: skins, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }}"></select>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Timezone:</span>
            </div>
            <div class="right" style="width: 70%">
                <select data-bind="{value: timezone, options: timezones, optionsValue: function(item) { return item.id }, optionsText: function(item) { return item.name }}"></select>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>Backup:</span>
            </div>
            <div class="right" style="width: 70%">
                <a data-bind="{visible: showRegister, attr: {href: registerUrl}}">Register with dropbox (development mode)</a>
                <input type="checkbox" data-bind="{visible: !showRegister(), checked: shouldBackup}" />
                <span data-bind="{visible: !showRegister()}">Scheduled</span> <strong>|</strong> 
                <a href="#" data-bind="{visible: !showRegister() && !isBacking(), click: backup}">Backup now</a>
                <span data-bind="visible: isBacking" >Backing <img alt="ajax" src="@Url.Content("~/Content/images/ajax-loader.gif")"/></span> 
                <span class="success" data-bind="text: backupMessage"></span>
            </div>
            <div class="clear"></div>
            <div class="left" style="width: 20%">
                <span>SiteMap:</span>
            </div>
            <div class="right" style="width: 70%">
                <a href="#" data-bind="{visible: !isGenerating(), click: generate}">Re-Generate</a>
                <span data-bind="visible: isGenerating">Generating SiteMap <img alt="ajax" src="@Url.Content("~/Content/images/ajax-loader.gif")" /></span>
                <span class="success" data-bind="text: generateMessage"></span>
            </div>
            <div class="clear"></div>
            <div style="text-align: center">
                <input type="button" value="Update Settings" data-bind="click: update" />
            </div>
        </fieldset>
    </div>
</div>



